<template>
  <el-drawer
    class="dia-style"
    :title="title"
    :visible.sync="open"
    width="60%"
    :close-on-click-modal="false"
    size="50%"
    :wrapper-closable="false"
    @close="cancel">
    <div class="drawer-container">
      <div class="hk-flex">
        <search-form
          :data="searchData"
          :field-list="fieldList"
          :list-type-info="dictList"
          @handleSearch="handleQuery"
          @handleReset="resetQuery" />
      </div>
      <div class="hk-flex-column">
        <hk-table
          :table-data="tableData"
          :table-columns="tableDataList"
          :show-pag="false"
          :loading="loading"
          show-index
          :rules="rules"
          is-need-index
          :dict-list="dictList"
          operate
          @handleEvent="handleEvent">
          <template #operate="scope">
            <el-button type="text" @click="handleDelete(scope.row.index)">删除</el-button>
          </template>
        </hk-table>
        <el-button icon="el-icon-plus" class="add-row" @click="handleAdd">增加行</el-button>
      </div>
    </div>
    <div class="drawer-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import HkForm from '@/components/Hk-Form'
import SearchForm from '@/components/HkSearchform/index.vue'
import HkTable from '@/components/Hk-Table/index.vue'
import { pageList, nsertNav } from '@/api/specialProject/workBench'

export default {
  components: { HkForm, SearchForm, HkTable },
  data() {
    return {
      title: '配置',
      open: false,
      searchData: {},
      fieldList: [{ label: '关键字', type: 'input', field: 'fastName', placeholder: '请输入任务名称', maxlength: 20 }],
      dictList: {},
      queryParams: {
        current: 1,
        size: 10,
      },
      loading: false,
      tableData: [],
      tableDataList: [
        { label: '任务名称', param: 'fastName', type: 'input' },
        { label: '排序', param: 'sort', type: 'number', min: 1, max: 12, width: 110 },
        { label: '状态', param: 'fastState', type: 'switch', width: '100', activeValue: '0', inactiveValue: '1' },
        { label: '导航地址', param: 'fastUrl', type: 'input' },
      ],
      rules: {},
      defaultData: [],
    }
  },

  mounted() {},
  methods: {
    //  搜索
    handleQuery(data) {
      this.tableData = this.defaultData.filter((i) => {
        return i.fastName.includes(data.fastName)
      })
    },
    // 重置
    resetQuery() {
      this.tableData = JSON.parse(JSON.stringify(this.defaultData))
    },
    //  新增行
    handleAdd() {
      if (this.tableData.length > 1) {
        let lastObj = this.tableData[this.tableData.length - 1]
        if (!lastObj.fastName || !lastObj.sort || !lastObj.fastUrl) {
          this.$message.error('请填写完整上一条数据')
          return
        }
      }
      this.tableData.push({
        fastName: '',
        sort: '',
        fastState: '1',
        fastUrl: '',
      })
    },
    // 删除行
    handleDelete(index) {
      this.tableData.splice(index, 1)
      this.defaultData = JSON.parse(JSON.stringify(this.tableData))
    },

    submitForm() {
      let isCheck = this.tableData.every((i) => {
        return i.fastName && i.sort && i.fastUrl
      })
      if (!isCheck) {
        this.$message.error('请完善表单')
        return
      } else {
        nsertNav(this.defaultData).then((res) => {
          this.$message.success('配置成功')
          this.$emit('handleSubmit')
          this.cancel()
        })
      }
    },
    //  显示
    show() {
      this.open = true
      pageList().then((res) => {
        this.tableData = res
        this.defaultData = res
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.defaultData=[]
    },
    handleEvent() {
      this.defaultData = JSON.parse(JSON.stringify(this.tableData))
    },
  },
}
</script>

<style lang="scss" scoped>
.dark-theme {
  span {
    color: #fff !important;
  }
}
.hk-flex {
  align-items: flex-end;
}
.el-row {
  padding-bottom: 20px;
  margin-left: 20px;
}
.drawer-container {
  position: relative;
}
.sub-title {
  height: 20px;
  border-left: 2px solid #4b6eef;
  margin-bottom: 22px;

  span {
    margin-left: 8px;
  }
}

.ml10 {
  margin-left: 10px;
}

.mt40 {
  margin-top: 40px;
}
.drawer-container {
  padding: 0;
}
::v-deep {
  .el-upload--text {
    width: 100%;
  }
  .el-upload-dragger {
    width: 100%;
  }
  .el-upload--text {
    width: 100%;
  }
}
</style>
